<template>
  <div>
    <h1>点击让当前按钮变红</h1>
    <!-- 循环10次，创建10个按钮 绑定点击事件(传一个参数) -->
    <button
      v-for="item in 10"
      :class="{ red: currentId === item }"
      :key="item"
      @click="show(item)"
    >
      按钮
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentId: "",
    };
  },
  methods: {
    //   点击按钮的时候   把点击按钮传过来的数  赋值给currentId   判断这两个数是否相同，相同就给样式
    show(item) {
      this.currentId = item;
    },
  },
};
</script>

<style>
.red {
  background-color: red;
}
</style>